<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.id_public_user_info" placeholder="用户ID" clearable class="filter-item input-item" style="width: 200px;" @clear="handleFilter" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.mid_table_remark_003_like" placeholder="商品名称" clearable class="filter-item input-item"
                style="width: 200px;" @clear="handleFilter" @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
    </div>

    <div class="page-content">
      <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row
                style="width: 100%;">
        <el-table-column label="用户ID" prop="id" align="center" width="80" :class-name="getSortClass('id')">
          <template slot-scope="{row}">
            <span>{{ row.id_public_user_info || '暂无' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" align="center">
          <template slot-scope="{row}">
            <span>{{ row.mid_table_remark_003 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品一级类" align="center">
          <template slot-scope="{row}">
            <span>{{ row.mid_table_remark_001 || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品二级类" align="center">
          <template slot-scope="{row}">
            <span>{{ row.mid_table_remark_002 || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="浏览时间" align="center">
          <template slot-scope="{row}">
            <span>{{ row.time_insert }}</span>
          </template>
        </el-table-column>
<!--        <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button type="primary" size="mini" @click="handleDetails(row)">
              详情
            </el-button>
          </template>
        </el-table-column>-->
      </el-table>
    </div>

    <pagination v-show="total>0" :total="total" :page.sync="currentPage" :limit.sync="listQuery.limit"
                @pagination="getPageList" />
  </div>
</template>
<script>
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination'
import { userList } from '@/api/user' // secondary package based on el-pagination
import { warehouseList } from '@/api/warehouse'
import {middleList} from "@/api/middle";

export default {
  name: 'History',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      currentPage: 0,
      listLoading: true,
      shopData: [],
      listQuery: {
        invoke_method: 'public_load_middle_table_list',
        pre_db_para_middle_table_name: 'public_middle_table_search_msg',
        pre_db_para_begin_idx: 0,
        pre_db_para_length_4_list: 10,
        type_middle_app: 80001,
        type_inner_app: 1001,
        mid_table_remark_003_like: '',
        id_public_user_info: '',
        pre_db_para_order_by_para: ' time_insert desc '
      },
      warehouseQuery: {
        invoke_method: 'public_page_4m_load_agent_list',
        pre_db_para_begin_idx: 0,
        pre_db_para_length_4_list: 1000,
        pre_db_para_agent_type_4_use: 20,
        pre_db_para_is_online: 0
      }
    }
  },
  mounted() {
    this.getList()
    this.getShopData()
  },
  methods: {
    /*
    * 获取页面数据
    * */
    getList() {
      this.listLoading = true
      middleList(this.Qs.stringify(this.listQuery)).then(response => {
        this.list = response.page_content
        console.log(this.list);
        this.total = response.result_num

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 0.5 * 1000)
      })
    },
    /*
    * 点击分页进行查询
    * */
    getPageList(val) {
      this.listQuery.pre_db_para_begin_idx = (val.page - 1) * this.listQuery.pre_db_para_length_4_list
      this.getList()
    },
    /*
    * 查询数据
    * */
    handleFilter() {
      this.listQuery.pre_db_para_begin_idx = 0
      this.getList()
    },
    /*
    * 查看详情
    * */
    handleDetails(item) {
      this.$router.push({ path: '/userDetails', query: { user_id: item.id_public_user_info }})
    },

    /*
    * 获取门店数据
    * */
    getShopData() {
      warehouseList(this.Qs.stringify(this.warehouseQuery)).then(response => {
        this.shopData = response.page_content
      })
    },

    /*
    * 表格样式
    * */
    getSortClass: function(key) {
      const sort = this.listQuery.sort
      return sort === `+${key}` ? 'ascending' : 'descending'
    }
  }
}
</script>

<style lang="scss" scoped>
.el-select {
  ::v-deep {
    .el-select-dropdown__item {
      width: 200px;
    }
  }
}

</style>
